<template>
	<view>
		<view style="padding: 32rpx;">
			<mark-slide-list1 v-if="list.length!==0" :list="list" :border="true" @selectAddress="selectAddress"
				@editclick="clickMethod" @delAddress="changeMethod"></mark-slide-list1>
			<!-- <sys-noList v-else :title="`暂无收货地址！`" :subtitle="` 快来创建属于你的收货地址吧~`"></sys-noList> -->
			<view class="noSearch" v-else>
				<!-- <image src="/static/icon/home/noSearch.png" alt=""></image> -->
				<view>您还未填写收货地址，请填写。</view>
			</view>
			<view style="height: 140upx;"></view>

		</view>
		<view style="background-color: #fff;width: 100%;height: 120upx;position: fixed;bottom: 0;">

		</view>
		<view class="btn" @click="gotoAddress">
			<view style="margin-right: 16rpx;"><u-icon name="plus" color="#fff" size="28"></u-icon></view>
			<view>添加收货地址</view>
		</view>
		<u-toast ref="uToast" />
		<!-- <u-modal :show="show" ref="uModal" @confirm="confirm" @cancel="show=false" buttonReverse showCancelButton :content="content"></u-modal> -->
		<sysDelModal :title="`您确认删除地址吗？`" :changeClass="false" :show="delModalShow" @confirm="confirm"
			@cancel="delModalShow=false"></sysDelModal>
	</view>
</template>

<script>
	import markSlideList1 from '@/components/mark-slide-list1.vue'
	import sysDelModal from '@/components/sys-delModal'
	import {
		queryUserAddressList,
		queryAddress,
		deleteUserAddress
	} from '../../common/address'

	export default {
		components: {
			markSlideList1,
			sysDelModal
		},
		data() {
			return {
				list: [{
					// id: 1,
					// surname: '张',
					// image:'/static/icon/home/address.png',
					// title: '海绵宝宝',
					// iphone:'15878963214',
					// detail: '山东省 济南市 历下区 姚家街道工业南路华润置地7号楼',
					// slide_x: 0
				}],
				delModalShow: false,
				delId: '',
				content: '确定要删除该收货地址?',
				buttonList: [{
					title: '删除',
				}],
				IsSelectAddress: ''
			}
		},
		onLoad(option) {
			this.IsSelectAddress = option.IsSelectAddress
			// //console.log(option.IsSelectAddress);
		},
		onShow() {
			this.queryUserAddressList()
		},
		onPullDownRefresh() {
			this.queryUserAddressList()
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000)
		},
		methods: {
			queryUserAddressList() {
				queryUserAddressList().then((res) => {
					//console.log(res);
					this.list = res.data
					//console.log(this.list);
				})
			},

			changeMethod(data) {
				this.delModalShow = true
				this.delId = data.id
				//console.log('滑动按钮回调', data)
				//console.log('this.delId', this.delId);
			},
			clickMethod(data) {
				uni.navigateTo({
					url: '/pages/setAddress/setAddress?id=' + data.id
				})
				//console.log('点击行回调', data)
			},
			gotoAddress() {
				uni.navigateTo({
					url: '/pages/setAddress/setAddress'
				})
			},
			confirm() {
				deleteUserAddress(this.delId).then((res) => {
					this.$refs.uToast.show({
						title: res.msg,
						message: res.msg,
						icon: false,
						position: 'top',
					})
					if (res.code == 200) {
						this.delModalShow = false
						this.queryUserAddressList()
					}
				})
			},
			selectAddress(data) {
				if (this.IsSelectAddress == "true") {
					let pages = getCurrentPages();
					let prevPage = pages[pages.length - 2];
					prevPage.$vm.addressList = [data]
					prevPage.$vm.show = true
					//console.log('IsSelectAddress', data);
					uni.navigateBack();
					//console.log('点击地址的回调', data)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: rgb(248, 248, 248) !important;
		padding-top: 0;
		// background-color: #f4f4f4;
		position: relative;
	}

	.noSearch {
		text-align: center;
		font-weight: 400;
		font-size: 12px;
		color: #999999;
		margin: 0 auto;
		position: relative;
		top: 180rpx;

		image {
			width: 312rpx;
			height: 312rpx;
			margin-top: 68rpx;
			margin-bottom: 68rpx;
		}
	}

	.btn {
		box-sizing: border-box;
		width: 682rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: #333333;
		border-radius: 70rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #FFFFFF;
		position: fixed;
		left: 34rpx;
		bottom: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		// padding: 0 182rpx;
	}
</style>